/* eslint-disable no-param-reassign */
import { computed, defineComponent } from 'vue';
import {
  getEditorEmits,
  getUploadProps,
  useNamespace,
} from '@ibiz-template/vue3-util';
import { UploadEditorController } from '../upload-editor.controller';
import './ibiz-image-preview.scss';

export const IBizImagePreview = defineComponent({
  name: 'IBizImagePreview',
  props: getUploadProps<UploadEditorController>(),
  emits: getEditorEmits(),
  setup(props) {
    const ns = useNamespace('image-preview');

    const c = props.controller;

    // 是否显示表单默认内容
    const showFormDefaultContent = computed(() => {
      if (
        props.controlParams &&
        props.controlParams.editmode === 'hover' &&
        !props.readonly
      ) {
        return true;
      }
      return false;
    });

    return {
      ns,
      c,
      showFormDefaultContent,
    };
  },
  render() {
    return (
      <div
        class={[
          this.ns.b(),
          this.ns.is('show-default', this.showFormDefaultContent),
        ]}
        onClick={(e: Event) => {
          // 阻止事件冒泡
          e.stopPropagation();
        }}
      >
        <el-image
          fit='contain'
          src={this.value}
          preview-src-list={[this.value]}
          {...this.$attrs}
        ></el-image>
      </div>
    );
  },
});
